<!-- eslint-disable vue/html-indent -->
<template>
  <div>
    <el-button @click="changeRed">改成红色</el-button>
    <el-button @click="changeGreen">改成绿色</el-button>
    <HtPreview ref="svgPreviewRef" :export-json="export_json" />
  </div>
</template>
<script setup lang="ts">
import { HtPreview } from "@/export";
import { ElButton } from "element-plus";
import { ref } from "vue";
const svgPreviewRef = ref<InstanceType<typeof HtPreview>>();
const export_json = ref<any>({
  canvasCfg: {
    width: 1920,
    height: 1080,
    scale: 1,
    color: "",
    img: "",
    guide: true,
    adsorp: true,
    adsorp_diff: 3,
    transform_origin: {
      x: 0,
      y: 0
    },
    drag_offset: {
      x: 0,
      y: 0
    }
  },
  gridCfg: {
    enabled: true,
    align: true,
    size: 10
  },
  json: [
    {
      id: "demo-4Y2Eq7UPBm",
      title: "演示svg文件",
      type: "svg",
      binfo: {
        left: 510,
        top: 200,
        width: 50,
        height: 50,
        angle: 0
      },
      resize: true,
      rotate: true,
      lock: false,
      active: false,
      hide: false,
      props: {
        fill: "#FF0000"
      },
      tag: "demo",
      common_animations: {
        val: "",
        delay: "delay-0s",
        speed: "slow",
        repeat: "infinite"
      },
      events: []
    }
  ]
});
const changeRed = () => {
  svgPreviewRef.value
    ?.setItemAttrByID("demo-4Y2Eq7UPBm", "props.fill.val", "#FF0000")
    .then(res => {
      console.log(res);
    });
};
const changeGreen = () => {
  svgPreviewRef.value
    ?.setItemAttrByID("demo-4Y2Eq7UPBm", "props.fill.val", "#00FF00")
    .then(res => {
      console.log(res);
    });
};
</script>
